<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: 'App',
        created() {
            let availableWidth;
            if (this.isMobile()) {
                availableWidth = "1300px"
            } else {
                availableWidth = (window.screen.width - 195 - 17) + 'px'
            }
            this.$store.commit('setAvailableWidth', availableWidth)
        },
        methods: {
            isMobile() {
                return navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
            },
        },
    }
</script>

<style>
    html {
        width: 100%;
        height: 100%;
    }

    body {
        width: 100%;
        height: 100%;
    }

    #app {
        width: 100%;
        height: 100%;
    }
</style>